<script setup name="organizational">
import {reactive, ref, watch} from "vue";
import cusTree from '@/components/tree/cus-tree.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import personnel_data from "@/plugins/data/personnel_data";
const tableData = ref([])
const dialogFormVisibleId = ref(null)
const dataM = reactive({
  label: '广州云为数据科技有限公司',
  id: 66666,
  child: [
    {
      label: '开发部',
      id: 1,
      child: [
        {
          label: '框架开发部',
          id: 12,
          child: []
        },
        {
          label: '框架开发部(VUE)',
          id: 13,
          child: []
        },
        {
          label: '框架开发部(微前端 )',
          id: 14,
          child: []
        },
        {
          label: '业务开发1部',
          id: 15,
          child: []
        },
        {
          label: '业务开发2部',
          id: 16,
          child: []
        },
        {
          label: '技术调研组',
          id: 17,
          child: []
        },
        {
          label: '二期开发工作组',
          id: 18,
          child: []
        }
      ]
    },
    {
      label: '开发部',
      id: 2,
      child: [
        {
          label: '框架开发部',
          id: 21,
          child: []
        },
        {
          label: '业务开发1部',
          id: 22,
          child: []
        },
        {
          label: '业务开发2部',
          id: 23,
          child: []
        },
        {
          label: '技术调研组',
          id: 24,
          child: []
        },
        {
          label: '二期开发工作组',
          id: 25,
          child: []
        }
      ]
    },
    {
      label: '开发部',
      id: 3,
      child: []
    },
    {
      label: '开发部',
      id: 3,
      child: [
        {
          label: '框架开发部',
          id: 31,
          child: []
        },
        {
          label: '业务开发1部',
          id: 32,
          child: []
        },
        {
          label: '业务开发2部',
          id: 33,
          child: []
        },
        {
          label: '技术调研组',
          id: 34,
          child: []
        },
        {
          label: '二期开发工作组',
          id: 35,
          child: []
        }
      ]
    }
  ]
})

watch(() =>dataM,(newValue)=> {
  console.log('watch',newValue);
},{ immediate: true })

const getId = (obj) => {
  console.log(obj)
  if (obj.fun === 'del')  {
    openDelMessageBox(obj.id)
  }else if (obj.fun === 'addChild') {
    dialogFormVisible.value = true
    dialogFormVisibleId.value = obj.id
    console.log(dialogFormVisible.value)
    console.log(dialogFormVisibleId.value)
  }else if (obj.fun === 'merge') {
    mergeVisible.value = true
  }
}

const getTableData = () => {
  tableData.value = personnel_data.getList()
}

getTableData()

let dialogFormVisible = ref(false)
const mergeVisible = ref(false)

const form = reactive({
  aType: 1,
  name: '',
  member: []
})

const tsProps = reactive({
  label: 'label',
  children: 'child'
})

const mergeForm = reactive({
  aType: 1,
  name: '',
  department: []
})

const addOne = () => {
  findAddData(dataM.child)

}

const findAddData = (data) => {
  data.forEach((item) => {
    console.log(item.id)
    console.log(dialogFormVisibleId.value)
    console.log(item.child.length)
    if (item.id == dialogFormVisibleId.value) {
      let id = 0
      if (item.child.length === 0) {
        id = Number(`${item.id}1`)
      }else {
        id = item.child[item.child.length - 1].id + 1
      }
      item.child.push({
        id: id,
        child: [],
        label: form.name,
        aType: form.aType
      })
      dialogFormVisible.value = false
      console.log(dataM)
    }else if (item.child.length !== 0) {
      findAddData(item.child)
    }
  })
}


const findData = (data, id) => {
  data.forEach((item, index) => {
    if (item.id == id) {
      data.splice(index, 1)
    }else if (item.child.length !== 0) {
      findData(item.child, id)
    }
  })
}

const deleteCurrentNode = (id) => {
  findData(dataM.child, id)
  ElMessage({
    type: 'success',
    message: '已撤销',
  })
}



const openDelMessageBox = (id) => {
  ElMessageBox.confirm(
      '撤销后无法恢复,部门成员将挂在单位上，确定撤销该部门/工作组吗？',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteCurrentNode(id)

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消',
        })
      })
}
</script>

<template>
<div class="organizational">
  <cusTree :treeData="dataM" @getId="getId"></cusTree>
  <!-- 添加部门或工作组的弹窗 -->
  <el-dialog title="添加下级" append-to-body width="500" v-model="dialogFormVisible">
    <el-form :model="form" size="large">
      <el-form-item label="类型" label-width="80px">
        <el-radio-group v-model="form.aType">
          <el-radio :label="1">部门</el-radio>
          <el-radio :label="2">工作组</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="( form.aType == 1 ? '部门' : '工作组' )+'名称'" label-width="80px">
        <el-input placeholder="请输入名称" v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item :label="( form.aType == 1 ? '部门' : '工作组' )+'成员'" label-width="80px">
        <el-select
            v-model="form.member"
            multiple
            placeholder="Select"
            style="width: 240px"
        >
          <el-option
              v-for="item in tableData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addOne()">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="合并" append-to-body width="500" v-model="mergeVisible">
    <el-form :model="mergeForm" size="large">
      <el-form-item label="名称" label-width="80px">
        <el-input placeholder="请输入名称" v-model="mergeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="部门" label-width="80px">
        <el-tree-select multiple
                        :props="tsProps"
                        node-key="id"
                        filterable
                        v-model="mergeForm.department"
                        :data="dataM.child"
                        check-strictly=true
                        :render-after-expand="false" />
      </el-form-item>
      <el-form-item label="合并人员" label-width="80px">
        <el-radio-group v-model="mergeForm.aType">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="mergeVisible = false">取 消</el-button>
      <el-button type="primary" @click="mergeVisible = false">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped lang="scss">
.organizational {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  width: 100%;
  height: auto;
  text-align: right;
}
</style>